<template>
  <div class="amap-page-container">
    <el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom" :plugin="plugin"
             :events="events" class="amap-demo">
      <el-amap-marker vid="component-marker" :position="componentMarker.position" :content-render="componentMarker.contentRender" ></el-amap-marker>
      <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker>
    </el-amap>
  </div>
</template>
<style scoped>
  .map {
    height: 500px;
  }

  .amap-demo {
    height: 500px;
  }
</style>
<script>
  import ARow from 'ant-design-vue/es/grid/Row'
  import { AMapManager } from 'vue-amap'
  import VueAMap from 'vue-amap'

  export default {
    name: 'Map',
    components: { ARow },
    data() {
      return {
        count: 1,
        slotStyle: {
          padding: '2px 8px',
          background: '#eee',
          color: '#333',
          border: '1px solid #aaa'
        },
        zoom: 3,
        center: [121.59996, 31.197646],
        groundimages: [
          {
            //显示图片url
            url: 'http://img4.imgtn.bdimg.com/it/u=2170225557,758070829&fm=26&gp=0.jpg',
            //显示图片的经纬度,前面的是左下角，后面的是右上角
            bounds: [[121.5273285, 31.21515044], [122.9273285, 32.31515044]],
            events: {
              click() {
                alert('click groundimage')
              }
            }
          }
        ],
        plugin: ['ToolBar', {
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(o) {
              console.log(o)
            }
          }
        }],
        componentMarker: {
          position: [121.5273285, 31.21315058],
          contentRender: (h, instance) => h(exampleComponents,{style: {backgroundColor: '#fff'}, props: {text: 'father is here'}}, ['xxxxxxx'])
        },
        slotMarker: {
          position: [121.5073285, 31.21715058]
        },
        //下面都是点坐标部分
        markers: [],
        windows: [],

        //下面都是曲线部分
        window: '',
        lines: [
          {
            path: [
              [116.39, 39.91, 116.37, 39.91],
              [116.380298, 39.907771, 116.38, 39.90],
              [116.385298, 39.907771, 116.40, 39.90]
            ],
            strokeDasharray: [10, 10],
            strokeColor: '#FF33FF', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 3, //线宽
            strokeStyle: 'solid', //线样式
            events: {
              click: () => {
                alert('click')
              }
            }
          }
        ],


        amapManager: new VueAMap.AMapManager(),
        mapEvents: {
          init(o) {
            o.setMapStyle('amap://styles/macaron')//自定义的高德地图的样式，我选的是马卡龙
            let marker = new AMap.Marker({ //点图标
              position: [121.59996, 31.197646]
            })
            console.log('1')
            marker.setMap(o)
            console.log('2')
            console.log(o)
            o.plugin(['AMap.Driving '], function() {
              console.log('3')
              var driving = new AMap.Driving({
                map: o,
                showTraffic: false,//去掉实时路况
                autoFitView: true,
                // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                policy: AMap.DrivingPolicy.LEAST_DISTANCE,
                panel: 'panel'
              })
              console.log('4')
              console.log(driving)
              //构造路线导航类
              // 根据起终点坐标规划步行路线,注意经纬度之间的空格
              // driving.search([origin_lon, origin_lat], [destination_lon, destination_lat])
              o.addControl(driving)
            })
          }
        }
      }
    },
    mounted() {
      let markers = []
      let windows = []

      let num = 10
      let self = this

      for (let i = 0; i < num; i++) {
        markers.push({
          position: [121.59996, 31.197646 + i * 0.1],
          events: {
            click() {
              self.windows.forEach(window => {
                window.visible = false
              })
              self.window = self.windows[i]
              self.$nextTick(() => {
                self.window.visible = true
              })
            }
          }
        })
        windows.push({
          position: [121.59996, 31.197646 + i * 0.001],
          content: `<div class="prompt">${ i }</div>`,
          visible: false
        })
      }
      this.markers = markers
      this.windows = windows
    }
  }
</script>